<template>
  <div>
    <h1>新闻表</h1>
    <form action="" @submit.prevent="btn" v-model="form">
      <p>标题<input type="text" v-model="form.headline"></p>
      <p>内容<input type="text" v-model="form.content"></p>
      <button type="submit">添加</button>
    </form>

    <table>
      <tr>
        <td>标题</td>
        <td>内容</td>
      </tr>
      <tr v-for="i in data">
        <td>{{i.headline}}</td>
        <td>{{i.content}}</td>
      </tr>
      <tr>
        <td colspan="2">
          <button v-for="j in spage" @click="btn1(j)" >{{j}}</button>
        </td>
      </tr>
    </table>

  </div>
</template>

<script>
export default {
  name: "news_post",
  data() {
    return {
      form: {},
      data:'',
      spage:[]
    }
  },
  methods: {
    btn() {
      this.axios.post('news/',this.form)
        .then(res => {
          console.log(res)
          alert('添加成功')
          this.form = {}
          this.btn1()
        })
    },
    btn1(i){
      this.axios.get('news/?id='+i)
      .then(res=>{
        console.log(res)
        this.data=res.data.data
        this.spage=res.data.page_range
      })
    }
  },
  mounted() {
    this.btn1(1)
  }
}
</script>

<style scoped>

</style>
